<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>defineProperty</title>
</head>
<body>
	<script type="text/javascript">
		var data = {
			value : 0
		}

		var watch = (function() {
			var defineReactive = function(obj, key, value) {
				Object.defineProperty(obj, key, {
					enumerable : true,
					configurable : true,
					set : function(newValue) {
						console.log('' + key + ':' + value + '->' + newValue);//notify
						value = newValue;
					},
					get : function() {
						return value;
					}
				});
			}
			return function(obj) {
				var keys = Object.keys(obj);
				for (var i = 0; i < keys.length; i++) {
					defineReactive(obj, keys[i], obj[keys[i]]);
				}
			}
		})();

		console.log(data);
		watch(data);

		console.log(data);
		data.value = 1;
		data.value = 2;
		data.value = 3;
	</script>
</body>
</html>